<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>columns - 列</title>
        <link rel="stylesheet" type="text/css" href="assets/ant-design-vue/antd.min.css"/>
        <script type="text/javascript" src="assets/dayjs/dayjs.min.js"></script>
        <script type="text/javascript" src="assets/dayjs/locale/zh-cn.js"></script>
        <script type="text/javascript" src="assets/dayjs/plugin/advancedFormat.js"></script>
        <script type="text/javascript" src="assets/dayjs/plugin/customParseFormat.js"></script>
        <script type="text/javascript" src="assets/dayjs/plugin/localeData.js"></script>
        <script type="text/javascript" src="assets/dayjs/plugin/weekday.js"></script>
        <script type="text/javascript" src="assets/dayjs/plugin/weekOfYear.js"></script>
        <script type="text/javascript" src="assets/dayjs/plugin/weekYear.js"></script>
        <script type="text/javascript" src="assets/vue/vue.global.prod.js"></script>
        <script type="text/javascript" src="assets/ant-design-vue/antd.min.js"></script>
        <script type="text/javascript" src="assets/ant-design-vue/antd-with-locales.min.js"></script>
        <script type="text/javascript">
            dayjs.locale("zh-cn"); // 全局使用中文简体
        </script>
    </head>
    <body>
        <div id="app" style="margin: 5px; min-height: 150px;">
            <a-config-provider :locale="locale">
                <div>
                    <a-form layout="inline" :model="form">
                        <a-form-item label="拆分表达式">
                            <a-input v-model:value="form.splitExp" :size="formSize" placeholder="请输入拆分表达式"></a-input>
                        </a-form-item>

                        <a-form-item label="每行列数">
                            <a-input-number v-model:value="form.columns" :size="formSize" placeholder="一行显示几列" :min="1" :max="100"></a-input-number>
                        </a-form-item>

                        <a-form-item label="分隔符">
                            <a-input v-model:value="form.separator" :size="formSize" placeholder="请输入分隔符"></a-input>
                        </a-form-item>

                        <a-form-item label="项目前缀">
                            <a-input v-model:value="form.itemPrefix" :size="formSize" placeholder="请输入每一项的前缀"></a-input>
                        </a-form-item>

                        <a-form-item label="项目后缀">
                            <a-input v-model:value="form.itemSuffix" :size="formSize" placeholder="请输入每一项的后缀"></a-input>
                        </a-form-item>

                        <a-form-item label="结果前缀">
                            <a-input v-model:value="form.prefix" :size="formSize" placeholder="请输入最终结果的前缀"></a-input>
                        </a-form-item>

                        <a-form-item label="结果后缀">
                            <a-input v-model:value="form.suffix" :size="formSize" placeholder="请输入最终结果的后缀"></a-input>
                        </a-form-item>

                        <a-form-item>
                            <a-space>
                                <a-dropdown-button type="primary" @click="handleButtonClick">
                                    执行
                                    <template #overlay>
                                        <a-menu @click="handleMenuClick">
                                            <a-menu-item key="0">无包裹字符</a-menu-item>
                                            <a-menu-item key="1">单引号（仅包裹项目）</a-menu-item>
                                            <a-menu-item key="2">双引号（仅包裹项目）</a-menu-item>
                                            <a-menu-item key="3">单引号（仅包裹结果）</a-menu-item>
                                            <a-menu-item key="4">双引号（仅包裹结果）</a-menu-item>
                                            <a-menu-item key="5">圆括号（仅包裹结果）</a-menu-item>
                                            <a-menu-item key="6">方括号（仅包裹结果）</a-menu-item>
                                            <a-menu-item key="7">花括号（仅包裹结果）</a-menu-item>
                                        </a-menu>
                                    </template>
                                </a-dropdown-button>

                                <a-button @click="recoverExp">恢复默认拆分表达式</a-button>
                            </a-space>
                        </a-form-item>
                    </a-form>
                </div>
                
                <div style="margin-top: 10px;">
                    <a-textarea v-model:value="input" :allow-clear="true" :autosize="textareaAutoSize" placeholder="请输入内容，一行一条"/>
                </div>

                <div style="margin-top: 10px;">
                    <div style="margin-bottom: 10px;"><a-button type="primary" :disabled="output.length <= 0" @click="copyOutput">复制执行结果</a-button></div>
                    <a-textarea v-model:value="output" :autosize="textareaAutoSize" readonly="true" placeholder="执行结果"/>
                </div>
            </a-config-provider>
        </div>
    </body>
    <script type="text/javascript" src="assets/js/index.js"></script>
</html>
